//引入公共样式
require("../../assets/js/commonCss");

//加载自己的样式
require('./play.less')
    //引入字体图标
require('../../assets/fonts/iconfont.css')
const request = require('../../utils/request')

window.onload = () => {
    //服务器地址
    const API = 'http://fitness.h5.itsource.cn:3701'

    //获取dom
    const player = document.querySelector('#player')
    const curIndex = document.querySelector('#curIndex')
    const totalLength = document.querySelector('#totalLength')
    const title = document.querySelector('#title')
    const pre = document.querySelector('#pre')
    const pause = document.querySelector('#pause')
    const next = document.querySelector('#next')
    const play1 = document.querySelector('#play1')
    const bar = document.querySelector('#bar')
    const end = document.querySelector('#end')
    const continue1 = document.querySelector('#continue')
    const popup = document.querySelector('.popup')

    //获取本地数据
    const fragments = JSON.parse(localStorage.getItem('fragments'))

    //设置变量
    let index = 0 //初始化播放的索引
    let length = fragments.length //视频总个数
    let timeList = [] //用于保存所有运动的时间
    let time = 0 //记录当前时间

    //播放函数
    function play() {
        //给视频src赋值
        player.src = API + fragments[index].videoUrl
            //信息赋值
        curIndex.textContent = index + 1
        totalLength.textContent = length
        title.textContent = fragments[index].title
            //监听播放器能播放时候 再播放
        player.addEventListener('canplay', () => {
            //播放
            player.play()
        })
    }

    //初始化播放
    play()

    //下一曲
    next.addEventListener('click', () => {
        //能够播放下一条
        if (index < length - 1) {
            //索引+1
            index++
            //播放器播放下一个视频
            play()
        } else {
            //到底了
            //index = 0
            //play()
        }
    })

    //上一曲
    pre.addEventListener('click', () => {
        if (index > 0) {
            //索引-1
            index--
            //播放器播放下一个视频
            console.log('index :>> ', index)
            play()
        } else {
            //   index = 0
            //   play()
        }
    })

    //暂停
    pause.addEventListener('click', () => {
        //显示播放按钮 隐藏暂停按钮
        play1.style.display = 'block'
        pause.style.display = 'none'

        //弹窗弹出
        popup.style.display = 'block'
            //暂停
        player.pause()
    })

    //播放
    play1.addEventListener('click', () => {
        //显示暂停按钮 隐藏播放按钮
        play1.style.display = 'none'
        pause.style.display = 'block'
            //播放
        player.play()
    })

    //进度条，             获取每时每刻的进度
    player.addEventListener('timeupdate', () => {
        //获取当前时间的百分比当前时间除以总时间
        const percent = player.currentTime / player.duration //当前时间/总时间
        bar.style.width = percent * 100 + '%'
            //把当前时间记录在time里面
        time = player.currentTime
    })

    //监听播放结束
    player.addEventListener('ended', () => {
        //执行下一曲
        next.click()
    })

    //点击继续
    continue1.addEventListener('click', () => {
        //弹窗隐藏
        popup.style.display = 'none'
            //继续播放
        play1.click()
    })

    //结束训练
    end.addEventListener('click', () => {
        //把运动数据发送请求 保存到数据库
        timeList.push(player.currentTime)

        //计算总时长
        let res = timeList.reduce((total, cur) => {
            return total + cur
        }, 0)

        //发送请求
        request
            .post('/api/exercise/save', {
                type: 2,
                duration: res,
                calorie: res * 1000,
            })
            .then(res => {
                if (res.data.errno === 0) {
                    //跳转到课程页面
                    location.href = './course.html'
                }
            })
    })

}